body
  margin: 0
  padding: 0

nav
  background-color: purple
  >a
    line-height: 30px
    color: #aef
    text-decoration: none
    font-size: 15pt
    &:hover
      color: #ccc
      font-size: 16pt
  @media(max-width:799px)
    >a
      display: block

.container
  min-height: 800px
  min-width: 600px

.left
  width: 300px
  // background: #a00
  min-height: 800px
  float: left
  @media(max-width:799px)
    display: none
  >a
    width: 200px
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    text-decoration: none
    line-height: 25px
    font-size: 13pt
  >p
    color: #eee
    width: 200px
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    font-size: 12pt
.product-list
  display: flex
  flex-wrap: wrap
  // justify-content: center

.main
  margin-left: 300px
  min-height: 800px
  @media(max-width:799px)
    margin-left: 0
  // background: #0a0
  width: 100%

.product
  width: 150px
  height: 180px
  margin: 5px
  margin-bottom: 60px
  >h3
    margin: 0 auto
    width: 120px
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    color: #aee
  >img
    width: 100%
    height: 100%
  >p
    margin: 0 auto
    width: 120px
    text-overflow: ellipsis
    >span
      color: red
